<template>
    <div class="shopdetail-page">
        <!-- Header -->
        <Header title="店铺详情">
            <template v-slot:back>
                <span @click="$router.go(-1)">&lt;</span>
            </template>
            <template v-slot:ope>
                
            </template>

        </Header>

        <!-- 店铺头 -->
        <div class="block">
            <div class="name">{{ $route.params.name }}</div>
            <!-- 拿当前店铺和收藏列表中的店铺作对比, 如果当前店铺在收藏列表中,说明当前店铺收藏了, 应该显示 "取消收藏" -->
            <!-- 拿当前店铺和收藏列表中的店铺作对比, 如果当前店铺不在收藏列表中,说明当前店铺还没有收藏, 应该显示 "收藏" -->

            <div class="btn" @click="collect($route.params); $toast('收藏成功!'); " v-if="!collectList.find((item)=>{ return item.id === $route.params.id })">收藏</div>
            <div class="btn" @click="cancel_collect($route.params.id); $toast('取消收藏成功!');" v-else>取消收藏</div>
        </div>
        
        <!-- 导航,列表 -->
        <div class="main">
            <!-- 导航 -->
            <div class="nav">
                <div @click="currentIndex=index" :class="{'nav-item':true,active:currentIndex===index }" v-for="(item,index) in goodlist" :key="index">{{item.title}}</div>
            </div>
            <!-- 列表 -->
            <div class="list" v-if="goodlist.length > 0">
                <div class="item" v-for="(item,index) in goodlist[currentIndex].content" :key="index">
                    <div class="pic">
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="text">
                        <div class="name">{{item.name}}</div>
                        <div>{{item.desc}}</div>
                        <div>月售{{item.buyCount}}件</div>
                        <div>¥{{item.price}}</div>
                    </div>
                    <div class="btns">
                        <span class="add btn" @click="add_to_cart(item)">+</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计 -->
        <div class="summary">
            <div>
                <span @click="show=true">{{ cartList.reduce( (total,item)=>{ return total + item.count },0 ) }}</span>
                <span>{{ cartList.reduce( (total,item)=>{ return total + item.count*item.price },0 ) }}</span>
            </div>
            <div>
                去结算
            </div>
        </div>

        <!-- 购物车 -->

        <Cart v-if="show" @hide="show=false"></Cart>
    </div>
</template>

<script>
//从vuex中导入 映射函数mapMutations (借助映射函数将需要的方法注入到当前组件)
import {mapMutations,mapState} from 'vuex'

import Axios from 'axios'
import Cart from '../components/Cart'

export default {
    data(){
        return {
            show: false,//控制购物车组件的显示/隐藏
            currentIndex:0,//保存当前点击导航的索引
            goodlist:[]//保存店铺内的商品数据
        }
    },
    components:{
        'Cart':Cart
    },
    mounted(){
        Axios.get('/goodlist').then((res)=>{ 
            this.goodlist = res.data.list;
        })
    },
    computed:{
        ...mapState(['collectList','cartList'])
    },
    methods:{
        ...mapMutations(['collect','cancel_collect','add_to_cart'])
    }
}
</script>


<style scoped>
    .name{
        line-height: 50px;
        font-size: 18px;
        padding-left: 20px;
    }
    .btn{
        line-height: 50px;
        text-align: center;
        border: 1px solid #f0f0f0;
    }
    .block{
        position: relative;
    }
    .block .btn{
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 30px;
    }

    /* main */
    .main {
        display: flex;
    }
    .main .nav{
        line-height: 50px;
        width: 60px;
        text-align: center;
    }
    .main .nav .nav-item.active{
        font-weight: bold;
    }
    .main .list{
        flex: 1;
    }
    .main .list .item{
        display: flex;
        margin: 20px;
        position: relative;
    }
    .main .list .item .pic{
        width: 60px;
        margin-right: 20px;
    }
    .main .list .item .pic img{
        width: 100%;
    }
    .main .list .item .text{
        font-size: 14px;
        flex: 1;
    }
    .main .list .item .text .name{
        line-height: 30px;
        font-size: 16px;
        padding-left: 0;
        font-weight: bold;
    }
    .main .list .item .btns{
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .main .list .item .btns .btn{
        height: 20px;
        width: 20px;
        display: block;
        line-height: 20px;
        text-align: center;
        color: white;
        background-color: lightskyblue;
        border: 1px solid #f0f0f0;
        border-radius: 50%;
    }

    .summary{
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background-color: #555;
        color: white;
        position: fixed;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .summary div span{
        margin-right: 20px;
    }
</style>